@import '@wordpress/base-styles/colors';

.domain-search {
	// Used by the loading placeholder component
	--color-neutral-0: #f6f7f7;
	--color-neutral-10: #c3c4c7;

	--domain-search-background-color: #fcfcfc;
	--domain-search-secondary-action-color: #{$gray-900};
	--domain-search-secondary-action-box-shadow-color: #{$gray-400};
	--domain-search-border-color: #{$gray-400};
	--domain-search-input-size: 56px;
	--domain-search-input-border-radius: 4px;
	--domain-search-promotional-price-color: #048015;
	--domain-search-warning-badge-border-color: #f4df7b;
	--domain-search-warning-badge-background-color: #f9edb4;
	--domain-search-success-badge-border-color: #b8e5be;
	--domain-search-success-badge-background-color: #d1eed5;
	--domain-search-mini-cart-height: 80px;
	--domain-search-mini-cart-inline-padding: 1rem;
	--domain-search-content-max-width: 64rem;
	--domain-search-initial-state-max-width: 50rem;

	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.domain-search--initial-state {
	width: 100%;
	max-width: var( --domain-search-initial-state-max-width );
	flex: 1;
	display: flex;
	flex-direction: column;
}

.domain-search--initial-state__already-own-domain-cta {
	margin-top: auto !important;
}

.domain-search--results {
	width: 100%;
	max-width: var( --domain-search-content-max-width );
}
